<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心全部功能</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style>
			.itemType {
				width: 20%;
				height: 100%;
				font-weight: 600;
			}

			.line {
				width: 0.0625rem;
				height: 40%;
				background: #999999;
			}

			.itemType span {
				color: red;
				margin-left: 0.25rem;

			}
		</style>
	</head>
	<body>
		<div style="width: 67.5rem;height: auto;" class="divColumn" id="content">
			<div style="width: 100%;height: 7.5rem;border: 0.0625rem solid #f0f0f0;" class="divColumn">
				<div style="width: 100%;height: 4.375rem;background: #F5F8FA;position: relative;" class="divRow divColumnCenter">
					<div class="divRow divColumnCenter" style="margin-left: 1.25rem;">
						<img src="img/test1.jpg" style="width: 3.75rem;height: 3.75rem;border-radius: 50% 50%;" />
						<div class="divColumn" style="margin-left: 0.625rem;">
							<h4>NickName</h4>
							<span>15070163132</span>
						</div>
					</div>
					<div style="width: 100%;height: 100%;position: absolute;" class="divRow divCenter">
						<span style="margin-right: 1.875rem;">我的收货地址</span>
						<span style="margin-left: 1.875rem;"> 我的优惠信息</span>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: #f0f0f0;"></div>
				<div style="width: 100%;height: 3.0625rem;" class="divRow divCenter">
					<div class="divCenter itemType">
						待付款
					</div>
					<div class="line"></div>
					<div class="divCenter itemType">
						待发货<span>6</span>
					</div>
					<div class="line"></div>
					<div class="divCenter itemType">
						待收货<span>6</span>
					</div>
					<div class="line"></div>
					<div class="divCenter itemType">
						待评价<span>6</span>
					</div>
					<div class="line"></div>
					<div class="divCenter itemType">
						退款
					</div>
				</div>
			</div>
			<!-- 我的物流信息 -->
			<div style="width: 100%;height: auto;border: 0.0625rem solid #F0F0F0;margin-top: 2.5rem;" class="divColumn">

				<div style="width: 100%;height:3.125rem;background: #F5F8FA;" class="divColumnCenter">
					<h4 style="margin-left: 1.25rem;">物流信息</h4>
				</div>
				<ul>
					<li v-for="(item,index) in goodsList">
						<div style="width: 100%;height: 0.0625rem;background: #f0f0f0;"></div>
						<div style="width: 100%;height: 7.5rem;position: relative;" class="leftAndRight">
							<img src="img/test2.jpg" style="width: 5rem;height: 6.25rem;margin-left: 1.25rem;" />
							<el-button style='margin-right: 1.25rem;'>确认收货</el-button>
							<div style="position: absolute;height: 100%;left: 7.5rem;" class="divColumn divRowCenter">
								<h3>河北石家庄公司的收件员【任江会】已收件</h3>
								<div class="divRow">
									<span style="margin-right: 1.875rem;color: #999999;">2019-09-19 10:38:13</span>
									<el-popover placement="top-start" title="物流详情" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
										<el-h3 slot="reference" style='cursor: pointer;'>查看物流明细</el-h3>
									</el-popover>
								</div>
							</div>
						</div>
					</li>
				</ul>


			</div>

		</div>

		<script>
			var content = new Vue({
				el: '#content',
				data: {
					goodsList: [{}, {}, {}, {}, {}, {}, {}]

				},


			})
		</script>
	</body>
</html>
